<!DOCTYPE>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
    <title>部门管理</title>
    <link href="/css/style2.css" rel="stylesheet" type="text/css"/>
    <link href="/css/select.css" rel="stylesheet" type="text/css"/>
    <script src="/js/jquery.js" type="text/javascript"></script>
    <script src="/js/jquery.idTabs.min.js" type="text/javascript"></script>
    <script src="/js/select-ui.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        KE.show({
            id: 'content7',
            cssPath: './index.css'
        });
    </script>

    <script type="text/javascript">
        $(document).ready(function (e) {
            $(".select1").uedSelect({
                width: 345
            });
            $(".select2").uedSelect({
                width: 167
            });
            $(".select3").uedSelect({
                width: 100
            });
        });
    </script>
</head>

<body>

<div class="place">
    <span>位置：</span>
    <ul class="placeul">
        <li><a href="#">部门管理</a></li>
    </ul>
</div>

<!--查询条件-->
<br/>
<br/>
<ul class="seachform">

    <li>
        <label> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;部门名称</label><input class="scinput" id="deptname" name=""
                                                                             type="text"/></li>

    <li><label>&nbsp;</label><input class="scbtn" name="" onclick="find()" type="button" value="查询"/></li>

</ul>
</div>

<div class="tools">

    <ul class="toolbar">
        <li class="click"><span><img src="/images/t01.png"/></span><a href="deptInsertView" target="_self">添加</a></li>
        <li class="click"><img src="/images/trash.png"/></span><a href="#" onclick="deleteAll()" target="_self">删除</a>
        </li>
    </ul>
</div>


<table class="tablelist">
    <tbody>
    <tr>
        <td>
            <table class="tablelist">
                <tbody>
                <tr>
                    <td>
                        <table class="tablelist">
                            <tbody>
                            <tr>
                                <td>
                                    <table class="tablelist">
                                        <thead>
                                        <tr>
                                            <th height="83" width="5%"><input id="checkAll" name=""
                                                                              onchange="checkAll()"
                                                                              type="checkbox" value=""/></th>
                                            <th width="12%">部门编号<i class="sort"><img src="/images/px.gif"/></i></th>
                                            <th width="16%">部门名称</th>
                                            <th width="15%">负责人</th>
                                            <th width="13%">人数</th>
                                            <th width="21%">注册时间</th>
                                            <th width="18%">操作</th>
                                        </tr>
                                        </thead>
                                        <tbody id="content">
                                        <tr th:each="p:${depts}">
                                            <td><input class="checkOne" name="" type="checkbox" value=""/></td>
                                            <td th:text="${p.departmentId}">10001</td>
                                            <td th:text="${p.departmentName}">研发一部</td>
                                            <td th:text="${p.manager}">张楠</td>
                                            <td th:text="${p.totalUser}">20</td>
                                            <td th:text="${p.createTime}">2013-09-09 15:05</td>
                                            <td><span>
                      <a class="tablelink" th:href="'deptUpdate?id='+${p.departmentId}">
                          <img src="/images/user_edit.png"/>修改</a>
                      <a class="tablelink" href="#" onclick="deleteOne(this)"
                         th:data="${p.departmentId}"> <img src="/images/trash.png"/>删除</a></span>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </td>
                </tr>
                </tbody>
            </table>
        </td>
    </tr>
    </tbody>
</table>


<div class="pagin">
    <div class="message">共<i class="blue" th:text="${depts.totalElements}">

    </i>条记录，当前显示第&nbsp;<i class="blue" th:text="${depts.number+1}+'&nbsp;'">2&nbsp;</i>页
    </div>
    <!--current more-->
    <ul class="paginList">
        <li class="paginItem"><a href="javascript:;"><span class="pagepre"></span></a></li>

        <li th:class="${depts.number==(i-1)}?'paginItem current':'paginItem'"
            th:each="i:${#numbers.sequence(1,depts.totalPages)}">
            <a th:href="'deptSearch?page='+${i-1}" th:text="${i}">1</a></li>
        <li class="paginItem"><a href="javascript:;"><span class="pagenxt"></span></a></li>
    </ul>
</div>


<div class="tip">
    <div class="tiptop"><span>提示信息</span><a></a></div>

    <div class="tipinfo">
        <span><img src="images/ticon.png"/></span>
        <div class="tipright">
            <p>是否确认对信息的修改 ？</p>
            <cite>如果是请点击确定按钮 ，否则请点取消。</cite>
        </div>
    </div>

    <div class="tipbtn">
        <input class="sure" name="" type="button" value="确定"/>&nbsp;
        <input class="cancel" name="" type="button" value="取消"/>
    </div>

</div>


</div>

<script type="text/javascript">
    $('.tablelist tbody tr:odd').addClass('odd');
</script>
</body>
<script>
    function find() {

        $.ajax({
            url: 'deptSearchByName',
            data: {
                deptname: $("#deptname").val()
            },
            success: function (data) {
                console.log(data);
                let tr = ""
                if (data == "") {
                } else {
                    tr = `<tr >
                        <td><input name="" type="checkbox" value="" class="checkOne"/></td>
                        <td>${data.departmentId}</td>
                        <td>${data.departmentName}</td>
                        <td>${data.manager}</td>
                        <td>${data.totalUser}</td>
                        <td>${data.createTime}</td>
                        </td>
                        <td><span>
                        <a href="deptUpdate?id=${data.departmentId}" className="tablelink"><img src="/images/user_edit.png"/>修改</a> <a
                            href="#" className="tablelink" onClick="deleteOne()" th:data="${data.departmentId}"> <img
                            src="/images/trash.png"/>删除</a></span></td>
                    </tr>`
                }

                $(".pagin").hide()
                $("#content").html(tr)
            }
        })
    }

    function deleteOne(target) {
        let boo = confirm("确定删除？");
        if (boo == false) {
            return
        }
        $.ajax({
            url: 'deptDelete',
            data: {
                id: target.getAttribute("data"),
            },
            success: function () {
                alert('删除成功！')
                location.reload()
            },
            fail: function () {
                alert('删除失败！')
            }
        })

    }

    function checkAll() {
        for (let i = 0; i < $(".checkOne").length; i++) {
            $(".checkOne")[i].checked = $("#checkAll")[0].checked
        }
    }


    function deleteAll() {
        let boo = confirm("确定删除？");
        if (boo == false) {
            return
        }
        let tr = $(".checkOne:checked").parent().parent().find('a:eq(1)')
        if (tr.length == 0) {
            alert('请选择删除的选项！')
            return
        }
        for (let i = 0; i < tr.length; i++) {
            $.ajax({
                url: 'deptDelete',
                data: {
                    id: tr[i].getAttribute("data"),
                },
                success: function () {
                    location.reload()
                }
            })
        }
        alert('删除成功！')
        location.reload()
    }

</script>

</html>
